const path=require('path');
const webpack=require('webpack'); //这是第二步
//导入在内存中生成 HTML 页面的插件
//只要是插件，都一定要放到plugins中去
//这个插件的两个作用：
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin=require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

// 这个配置文件，起始就是一个JS文件，通过Node中的模块操作，向外暴露一个配置对象
module.exports={
	entry:path.join(__dirname,'./src/main.js'),//入口,表示要使用webpack打包那个文件
	output:{// 输出文件相关的配置
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename:'bundle.js' //这是指定输出文件的名称
	},
	devServer:{ //这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一点
		// --open --port 3000 --contentBase src --hot
		open:true, //自动打开浏览器
		port:3000, //设置启动时候的运行端口
		contentBase:'src', //指定托管的根目录
		hot:true //启动热更新 的第一步
	},
	mode:'none',
	plugins:[
		new webpack.HashedModuleIdsPlugin(), //new 一个热更新的模块对象，这是启动热更新的第三步
		new htmlWebpackPlugin({  //创建一个在内存中生成HTML页面的插件
			template:path.join(__dirname,'./src/index.html'), //指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			filname:'index.html' //指定生成的页面的名称
		}),
		new VueLoaderPlugin()
	],
	module:{  // 这个节点，用于配置所有第三方模块加载器
		rules:[  // 所有第三方模块的 匹配规则
			{ test:/\.css$/,use:['style-loader','css-loader'] }, //配置处理 .css文件的第三方 loader 规则
			{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] }, //处理scss文件的loader
			{ test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=20570&name=[hash:8]-[name].[ext]'},
			// 处理图片的loader
			// limit 给定的值，是图片的大小，单位是byte,如果我们引用的图片，大于或等于给定的limit值，则不会被转为base64格式
			// 的字符串，如果 图片小于给定的limit值，则会被转为base64的字符串
			{ test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}, //处理字体文件的loader
			{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, //配置Babel来转换高级ES语法
			{ test:/\.vue$/,use:'vue-loader'} //处理.vue文件的loader
		]
	},
	resolve:{
		alias:{  //修改vue被导入时候的包的路径
			// "vue$":"vue/dist/vue.js"
		}
	}
}